import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function OrgCreateDialog() {
	return (
		<Dialog>
			<form>
				<DialogTrigger asChild>
					<Button>
						<PlusIcon />
						Create
					</Button>
				</DialogTrigger>
				<DialogContent className="sm:max-w-md">
					<DialogHeader>
						<DialogTitle>Create organization</DialogTitle>
						<DialogDescription>organization description</DialogDescription>
					</DialogHeader>
					<div className="grid gap-4">
						<div className="grid gap-3">
							<Label htmlFor="name">Name</Label>
							<Input id="name" name="name" />
						</div>
						<div className="grid gap-3">
							<Label htmlFor="slug">Slug</Label>
							<Input id="slug" name="slug" />
						</div>
					</div>
					<DialogFooter>
						<DialogClose asChild>
							<Button variant="outline">Cancel</Button>
						</DialogClose>
						<Button type="submit">Submit</Button>
					</DialogFooter>
				</DialogContent>
			</form>
		</Dialog>
	);
}
